<template>
	<view class="box">
		<!-- 搜索 -->
		<view class="search">
			<view class="search_box">
				<view class="search_main">
					<view class="search_icon">
						<image src="/static/images/wysou.png" mode="heightFix"></image>
					</view>
					<view class="ipt">
						<input type="text" placeholder="请输入商品名称" v-model="keyword" @confirm="toSearch" />
					</view>
				</view>
			</view>
		</view>
		<view class="history">
			<view class="search_history">
				<view class="float-l">历史搜索</view>
				<view class="float-r" @click="delHistory">
					<image src="/static/del.png" mode=""></image>
					清空历史记录
				</view>
				<view class="item_search_history"></view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click="detail(item.id)">
				<view class="item_box">
					<image :src="item.picUrl" mode=""></image>
					<view class="item_main">
						<view class="item_main_title">
							<view>{{item.name}}</view>
							<p>{{item.brief}}</p>
						</view>
						<view style="display: flex; align-items: baseline;">
							<view class="price_box">
								<view class="price">
									￥
									<span>{{item.retailPrice}}</span>
									.
									<span></span>
								</view>
							</view>
							<view class="oldPrice_box">
								<view class="oldPrice">
									￥
									<span>{{item.counterPrice}}</span>
									.
									<span></span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../static/request'
	export default {
		data() {
			return {
				limit: 10,
				keyword: '',
				list: [],
			}
		},
		methods: {
			detail(prodid){
				// 将 val 转换为 JSON 字符串
				const valStr = encodeURIComponent(JSON.stringify(prodid));
				uni.navigateTo({
					url: `/pages/detail/detail?prodid=${valStr}`
				});
			},
			toSearch() {
				uni.showLoading({
					title: '加载中'
				});
				api.get('goods/list', {
					keyword: this.keyword,
					page: this.page,
					limit: this.limit,
					categoryId: 0
				}).then(res => {
					console.log(res, '1e')
					// 请求成功后隐藏加载提示
					uni.hideLoading();
					this.list = res.data.data.list
				}) 
			},
			delHistory() {
				uni.showModal({
					title: "是否清空历史记录",
					confirmColor: '#ee0a24'
				})
			}
		},
		// 滚动监听
		onReachBottom() {
			this.limit = this.limit + 10
			this.toSearch()
		},
	}
</script>

<style>
@import url('search.css');
</style>
